<template>
    <div class="container">
        <div class="box">
            <el-form ref="loginform" :model="form" :rules="rules" label-width="80px">
                <img class="tu" src="../assets/enna.gif" alt="">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="form.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="form.password"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit" class="sub">立即登录</el-button>
                    <!-- <el-button>取消</el-button> -->
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import { userLogin } from '@/request'
import { setCookie } from '@/utils/cookie'
export default {
    data () {
        return {
            form:{
                username: 'cuihua',
                password: '123123'
            },
            rules: {
                username: [
                    { validator: this.checkUser, trigger: 'blur' }
                ],
                password: [
                    { validator: this.checkPass, trigger: 'blur' }
                ]
            }
            
        }
    },
    methods: {
        checkUser(rule, value, callback){
            this.check(value, callback, '用户')
        },
        checkPass(rule, value, callback){
            this.check(value, callback, '密码')
        },
        check(value, callback, text){
            if(value === ''){
                callback(new Error(text + '不能为空！'))
                return
            }
            callback()
        },
        onSubmit() {
            this.$refs['loginform'].validate(async (valid) =>{
                if(!valid){
                    return false
                }
                // 验证通过 获取账号密码
                // console.log(111,this.form);
                let data = await userLogin(this.form)
                console.log(data);
                let {error_code,msg} = data
                if(error_code === 200){
                // 存储令牌 + cookie + 权限
                    localStorage.setItem('adminToken', data.data.token)
                // cookie中存储用户名和id
                    setCookie('adminname',data.data.username)
                    setCookie('adminId',data.data.userId)
                // 给vuex中存储登陆状态
                this.$store.commit('changeLoginStatus', true)
                // 权限存储在sessionStorage 需要存字符串格式
                    sessionStorage.setItem('auths',JSON.stringify(data.data.auths))
                // 给提示  跳转页面
                    this.$message({
                        message: msg,
                        type: 'success',
                        duration: 1500,
                        onClose: () =>{
                            this.$router.push('/homeindex/aaa')
                        }
                    }) 
                }else {
                    this.$message({
                        message: msg,
                        type: 'error',
                        duration: 1500,
                    }) 
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
    .container{
        background-image: url(../assets/zu.jpeg);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 100%;
        height: 100%;
        background-color: rgb(7, 105, 180);
        .box{
            opacity: 0.9;
            width: 400px;
            height: 250px;
            border: 1px solid #ccc;
            background-color: #fff;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            .el-input{
                width: 90%;
            }
            .el-form{
                margin-top: 50px;
            }
            .tu{
                width: 100px;
                height: 100px;
                border-radius: 50%;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                top: -65px;
                z-index: 2; 
                background-color: white;
                border: 1px solid #fff;
            }
            .el-input{
                width: 90%;
            }
            .el-form{
                margin-top: 50px;
            }
            .sub{
                margin-left: 75px;
            }
        }
    }
</style>
